<template>
  <div class="container">
    <div class="header" >
      <CommonHeader/>
    </div>
    <div class="main">

      <!--文章分类-->
      <el-tabs
          :tab-position="tabPosition"
          style="height: 100%"
          type="card"
          @tab-click="handlePostCategory"
      >
        <el-tab-pane
            v-for="pc in postCategory"
            :key="pc.id"
            style="margin-left: 30px;"
            class="pc"
            :label="pc.name"
        >
          <!--岗位选择器-->
          <div style="margin-bottom: 10px">
            <el-select
                v-model="selectJob"
                multiple
                placeholder="请选择岗位"
                style="width: 240px"
            >
              <el-option
                  v-for="job in JobOptions"
                  :key="job.id"
                  :label="job.label"
                  :value="job.id"
              />
            </el-select>
            <el-button style="margin-left: 10px" :icon="Search">查询</el-button>
          </div>
          <el-scrollbar height="575px">
            <PostList :post-list="postList"/>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--分页-->
    <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        background
        layout="total, prev, pager, next"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

  </div>

</template>

<script setup>
import PostList from "../components/PostList.vue";
import CommonHeader from "../components/CommonHeader.vue";
import {ref} from 'vue'
import {Search} from '@element-plus/icons-vue'

// 文章列表 用于传给子组件渲染
const originPostList = ref([
  {
    id: 1,
    title: 'Java未来趋势',
    categoryId: 1,
    post: 'Java在2022年将有以下五种技术趋势：\n' +
        '\n' +
        '基本效用：Java是一种全面的编程语言，具有大量可用于解决具有挑战性的编程问题的库。Java提供了前所未有的性能、生产力和可观察性组合。\n' +
        '中国市场：在中国，99% 的用户更喜欢通过手机上网，而且手机通常由 Java 驱动。中国移动设备市场约 80% 由 Android 设备主导，iOS 设备以 20% 左右遥遥领先。Android 建立在 Google 的 Java 编程语言版本之上。仅中国对在 Android 上运行的应用程序的需求就确保了未来几年对 Java 开发人员的持续需求。\n' +
        '云原生兼容性：Servlet 和 JavaServer Page 规范或 JSF 等流行的 API 已证明 Java 是服务器端计算的强大力量。Android 的流行和支持它的基于 Java 虚拟机的语言使 Java 在移动市场上无处不在。随着企业将基于 SOA 的应用程序迁移到云端，各种强大的云原生框架（例如 Spring Boot 或 Eclipse MicroProfile）使 Java 成为开发微服务的正确选择。\n' +
        '持续改进：Java 是一种成熟的、功能齐全的语言，其发布节奏每六个月发布一次更新版本，开发人员无需等待很长时间即可使用 Java 最受期待的新功能。2021 年 9 月发布了 Java 17，这是自 Java 11 以来的第一个长期支持版本。\n' +
        '向后兼容性：Java 对向后兼容性的承诺使架构师和设计人员对他们需要选择一种能够长期支持其组织需求的语言充满信心。对于可以长期维护和修改的大型企业项目尤其如此。',
    tags:['Java','后端']
  },
  {
    id: 2,
    title: 'ChatGPT对教育行业的影响',
    categoryId: 1,
    post: 'ChatGPT是一种基于人工智能的语言模型，它可以理解和回应自然语言，甚至可以写出长篇的文章。ChatGPT已经引起了教育界的关注，因为它可能会改变学生的学习方式和教师的评估方法。ChatGPT对教育行业的影响有以下几个方面：\n' +
        '\n' +
        'ChatGPT可能会威胁到学术诚信和学习效果。一些人担心学生会利用ChatGPT来完成作业、考试或论文，从而避免真正的学习和思考。这可能会导致学生缺乏批判性思维、创造性和沟通能力，也可能会影响学术界的信誉和质量。\n' +
        'ChatGPT可能会促进教育创新和技能培养。另一些人认为ChatGPT是一种有用的工具，可以帮助学生提高写作水平、拓展知识面、激发兴趣和灵感。他们建议教师不要禁止学生使用ChatGPT，而是教导他们如何合理、道德和高效地使用它。他们认为学生需要学习如何与人工智能系统协作，利用它们来增强人类的创造力和智慧。\n' +
        'ChatGPT可能会改变教育模式和目标。随着ChatGPT等人工智能技术的发展，教育界可能需要重新思考其教学使命和方法。如果一个聊天机器人可以做到大多数大学毕业生可以做到的事情，那么一个学位的价值是什么？教育的目标是什么？教师的角色是什么？这些问题需要教育界深入探讨和回答。',
    tags:['ChatGPT','人工智能']
  },
  {
    id: 3,
    title: '对外科医生的看法',
    categoryId: 2,
    post: '外科医生是一种职业，主要是诊断外科疾病，为患者提供手术治疗的医务工作者1。外科医生需要有丰富的理论知识和高超的手术技能，同时也要有良好的沟通能力和职业道德2。外科医生和内科医生的区别主要在于治疗手段的不同，外科医生以手术为主，内科医生以药物为主3。外科医生的收入受到多种因素的影响，如所在地区、医院等级、专业方向、工作年限等，一般来说，外科医生的收入高于平均水平，但也不是想象中的那么高4。',
    tags:['医疗','医生',"外科"]
  },
  {
    id: 4,
    title: '细胞培养员培养的是什么？',
    categoryId: 2,
    post: '细胞培养员是一种从事细胞培养相关工作的技术人员，主要是负责从动物或人体中取出组织细胞，经过消化、分离、扩增、冻存等操作，为生物学、医学、新药研发等领域提供细胞材料12。细胞培养员需要掌握无菌操作技术，熟悉各种培养基、缓冲液、消毒液的配制和使用，能够使用超净台、恒温培养箱、倒置显微镜、液氮储存罐等仪器设备3。细胞培养员的工作内容包括准备工作、取材、培养、传代、冻存等步骤4。',
    tags:['细胞','细胞培养员',"生物"]
  },
  {
    id: 5,
    title: '篮球和鸡能想到什么',
    categoryId: 3,
    post: '从当今最流行的梗出发，提到篮球和鸡能想到的是“鸡你太美”这个梗。这个梗是对明星蔡徐坤在偶像练习生节目中的自我介绍表演的恶搞和嘲讽12。蔡徐坤在表演中结合了篮球和舞蹈，但被网友认为运球动作尴尬，舞蹈喜感，配乐《只因你太美》也被空耳成“鸡你太美”3。这个梗后来被广泛用于恶搞和鬼畜视频，也被用来讽刺球技差劲的人4。这个梗和蔡徐坤本人没有什么关系，只是一种网络文化现象，不代表任何人的真实态度。',
    tags:['ikun','篮球',"蔡徐坤"]
  }
]) // 初始化文章列表
const postList = ref([])


// 侧边选项卡
const tabPosition = ref('left')
const postCategory = ref([
  {
    id: 1,
    name: '互联网'
  },
  {
    id: 2,
    name: '医疗健康'
  },
  {
    id: 3,
    name: '教育培训'
  },
])
const handlePostCategory = (pane) => { // 改变侧边栏选项卡
  let paneLabel
  if (pane) paneLabel = pane.props.label
  else paneLabel = '互联网'

  let postCategoryIds = 1
  postCategory.value.map(category => {
    if (category.name === paneLabel){
      postCategoryIds = category.id
    }
  })
  postList.value = originPostList.value.filter(post => post.categoryId === postCategoryIds)
}
handlePostCategory()


// 分页
const pageTotal = ref(100)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 岗位选择器
const selectJob = ref([])
const JobOptions = [
  {
    id: 1,
    label: 'Java培训讲师',
  },
  {
    id: 2,
    label: '算法工程师',
  }
]


</script>


<style lang="less" scoped>
.container {
  .el-pagination {
    margin: 0 24%;
  }

  .main {
    margin: 0 15%;
  }

  .header{
    margin-right: 20px;
  }

  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../public/post/bar1.png") no-repeat;
}
</style>